<template>
  <basic-container class="card-list_materials">
    <a-tabs default-active-key="1">
      <a-tab-pane tab="视频数据" key="1">
         <a-row class="col-wrap">
          <a-col span="7" offset="1" v-for="(item, index) in dataArr.slice(0, 3)" :key="index">
            <data-card :opts="item" @click="clickDataCard" />
          </a-col>
         </a-row>
         <a-row class="col-wrap">
           <a-col span="7" offset="1" v-for="(item, index) in dataArr.slice(3)" :key="index">
            <data-card :opts="item" @click="clickDataCard" />
          </a-col>
        </a-row>
      </a-tab-pane>
      <a-tab-pane tab="专栏数据" key="2">
        <a-row class="col-wrap">
          <a-col span="7" offset="1" v-for="(item, index) in columnArr.slice(0, 3)" :key="index">
            <data-card :opts="item" @click="clickDataCard" />
          </a-col>
        </a-row>
        <a-row class="col-wrap">
          <a-col span="7" offset="1" v-for="(item, index) in columnArr.slice(3)" :key="index">
            <data-card :opts="item" @click="clickDataCard" />
          </a-col>
        </a-row>
      </a-tab-pane>
    </a-tabs>
  </basic-container>
</template>
<script>
import BasicContainer from '../common/basicContainer.vue'
import DataCard from '../components/dataCard.vue'
export default {
  data () {
    return {
      currentTab: '1',
      dataArr: [
        {
          title: '粉丝数',
          jump: '/fans/fansview',
          num: 100,
          desc: '昨日',
          content: 100,
          mode: 'linkHover',
          showEnter: true,
          upArrow: true,
          downArrow: false,
          key: '粉丝数',

        },
        {
          title: '视频播放',
          jump: '/data-up',
          mode: 'linkHover',
          num: 100,
          desc: '昨日',
          content: 100,
          showEnter: true,
          upArrow: true,
          downArrow: false,
          key: '视频播放',
        },
        {
          title: '评论数',
          num: 100,
          desc: '昨日',
          content: 100,
          upArrow: false,
          downArrow: false,

        },
        {
          title: '弹幕数',
          num: 100,
          desc: '昨日',
          content: 100,
          upArrow: false,
          downArrow: false,

        },
        {
          title: '弹幕数',
          num: 100,
          desc: '昨日',
          content: 100,
          upArrow: false,
          downArrow: false,

        },
        {
          title: '分享数',
          num: 100,
          desc: '昨日',
          content: 100,
          upArrow: false,
          downArrow: false,

        }
      ],
      columnArr: [
        {
          title: '粉丝数',
          jump: '/fans/fansview',
          num: 100,
          desc: '昨日',
          content: 100,
          mode: 'linkHover',
          showEnter: true,
          upArrow: true,
          downArrow: false,
          key: '粉丝数',

        },
        {
          title: '阅读数',
          jump: '/data-up',
          mode: 'linkHover',
          num: 100,
          desc: '昨日',
          content: 100,
          showEnter: true,
          upArrow: true,
          downArrow: false,
          key: '阅读数',
        },
        {
          title: '评论数',
          num: 100,
          desc: '昨日',
          content: 100,
          upArrow: false,
          downArrow: false,

        },
        {
          title: '收藏数',
          num: 100,
          desc: '昨日',
          content: 100,
          upArrow: false,
          downArrow: false,

        },
        {
          title: '点赞数',
          num: 100,
          desc: '昨日',
          content: 100,
          upArrow: false,
          downArrow: false,

        },
        {
          title: '分享数',
          num: 100,
          desc: '昨日',
          content: 100,
          upArrow: false,
          downArrow: false,

        }
      ]
    }
  },
  components: {
    BasicContainer,
    DataCard
  },
  methods: {
    clickDataCard () {}
  }
}
</script>
<style lang="scss" scoped>
 $actvieColor:#00a1d6;
 .card-list_materials{
   .tabs{
     display: block;
   }
   /deep/.ant-tabs-nav {
    .ant-tabs-tab-active {
      color: $actvieColor;
    }
    .ant-tabs-tab{
      &:hover{
        color: $actvieColor;
      }
    }
   }
   /deep/.ant-tabs-ink-bar{
     background-color: $actvieColor;
   }
   .ant-row{
     margin-top: 24px;
     &.col-wrap {
       .ant-col:first-child{
         margin-left: 0;
       }
     }
   }
 }
</style>
